<template>
    <el-card>
        <el-descriptions class="margin-top" title="With border" :column="3" border>
            <template #extra>
                <el-button type="primary">Operation</el-button>
            </template>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon>
                            <user />
                        </el-icon>
                        &nbsp;Username
                    </div>
                </template>
                baolin.wang
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon>
                            <iphone />
                        </el-icon>
                        &nbsp;Telephone
                    </div>
                </template>
                18100000000
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon>
                            <location />
                        </el-icon>
                        &nbsp;Place
                    </div>
                </template>
                Wuhan
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon>
                            <tickets />
                        </el-icon>
                        &nbsp;Remarks
                    </div>
                </template>
                <el-tag size="small">PM</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon>
                            <office-building />
                        </el-icon>
                        &nbsp; Address
                    </div>
                </template>
                No.1188, Lumo Road, HongShan District, Wuhan, Hubei Province
            </el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" title="No icon with border" :column="3" border>
            <template #extra>
                <el-button type="primary">Operation</el-button>
            </template>
            <el-descriptions-item label="Username">baolin.wang</el-descriptions-item>
            <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
            <el-descriptions-item label="Place">Wuhan</el-descriptions-item>
            <el-descriptions-item label="Remarks">
                <el-tag size="small">PM</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="Address">No.1188, Lumo Road, HongShan District, Wuhan, Hubei Province
            </el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" title="Without border" :column="3">
            <template #extra>
                <el-button type="primary">Operation</el-button>
            </template>
            <el-descriptions-item label="Username">baolin.wang</el-descriptions-item>
            <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
            <el-descriptions-item label="Place">Wuhan</el-descriptions-item>
            <el-descriptions-item label="Remarks">
                <el-tag size="small">PM</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="Address">No.1188, Lumo Road, HongShan District, Wuhan, Hubei Province
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
    
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import {
    Iphone,
    Location,
    OfficeBuilding,
    Tickets,
    User,
} from '@element-plus/icons-vue'

</script>

<style scoped>
.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}
</style>